<template>
  <section
    class="flex overflow-hidden flex-wrap gap-[20px] justify-between items-center self-center  mt-[20px] max-w-full whitespace-nowrap bg-white  w-[1440px] bg-shadow rounded-[8px]"
  >
    <div
      class="w-[220px] h-[80px] flex items-center justify-center bg-[#126EDF] px-[20px] gap-2"
    >
      <img
        src="@/assets/images/home/information-bg.png"
        alt="Notification logo"
        class="object-contain w-[88px]"
      >
      <div class="text-white text-[14px] flex-1 flex flex-col gap-2 overflow-hidden whitespace-pre-line">
        <span class="text-[16px] font-[500]">{{ $t('homeText.information') }}</span>
        <a class="text-white w-auto hover:text-[#D9D9D9] cursor-pointer" @click="toMore">
          {{ $t('homeText.more') }} >
        </a>
      </div>
    </div>

    <el-row :gutter="80" class="flex-1 flex-wrap h-[80px] py-4 pr-[20px]  rounded-r-[8px] overflow-hidden">
      <el-col v-for="(item, index) in announcementList" :key="item.id" :span="12" :class="{ 'mb-[10px]': index === 0 || index === 1 }">
        <div
          class="flex justify-between w-full h-full items-center overflow-hidden"
        >
          <div class="flex gap-2 w-full items-center flex-1">
            <div class="w-1 h-1 rounded-full bg-[#666]" />
            <div class="flex-1 max-w-[480px] flex items-center">
              <div class="text-sm text-[#333] overflow-hidden text-ellipsis cursor-pointer hover:text-[--el-color-primary]" @click="handleClick(item)">
                {{ item.title }}
              </div>
              <div
                v-if="item.newShow"
                class="px-[4px] h-[12px] text-center text-white bg-red-600 rounded-[2px] text-[10px] ml-[10px] leading-[12px]"
              >
                NEW
              </div>
            </div>
          </div>
          <div class="self-stretch my-auto text-sm text-neutral-400">
            <time>[{{ item.publishTime?.slice(5, 10) }}]</time>
          </div>
        </div>
      </el-col>
    </el-row>
  </section>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { queryAnnouncementList } from '~/api/api-cms'

const announcementList = ref<any[]>([])

const { locale } = useI18n()

onMounted(async () => {
  await nextTick()
  queryAnnouncementList({ displayPosition: 1, language: locale.value === 'zh' ? 1 : 2 }).then((res) => {
    if (res?.code === '200') {
      announcementList.value = res.data.records.slice(0, 4)
    }
  })
})

const router = useRouter()

const handleClick = (item: any) => {
  router.push(`/advisoryNotice/detail?id=${item.uuid}`)
}

const toMore = () => {
  router.push('/advisoryNotice')
}
</script>

<style lang="scss" scoped>
.bg-shadow {
  box-shadow: 0px 2px 24px 0px #C5C5C580;
}
.el-link {
  :deep(.el-link__inner) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block
  }
}
</style>
